<template>
    <div class="mobileheader">
        <div class="headerbar">
            <ul class="nav_list">
                <li class="nav_item" :class="route =='/'?' nav_active':''">
                    <a href="#/">
                        <div class="nav_img">
                            <img src="/static/images/i1.png" alt="" class="none">
                            <img src="/static/images/i1_active.png" alt="" class="show">
                        </div>
                        <div class="nav_name">
                            网站首页
                        </div>
                    </a>
                </li>
                <li class="nav_item"  :class="route.indexOf('/work') >= 0 || route.indexOf('/detail')>=0|| route.indexOf('/userdetail')>=0 ?' nav_active':''">
                    <a href="#/work/view">
                        <div class="nav_img">
                            <img src="/static/images/i2.png" alt="" class="none">
                            <img src="/static/images/i2_active.png" alt="" class="show">
                        </div>
                        <div class="nav_name">
                            双带头工作室
                        </div>
                    </a>
                </li>
                <li class="nav_item"  :class="route.indexOf('/manage') >= 0 || route.indexOf('/result') >= 0 ?' nav_active':''">
                    <a href="#/manage">
                        <div class="nav_img">
                            <img src="/static/images/i3.png" alt="" class="none">
                            <img src="/static/images/i3_active.png" alt="" class="show">
                        </div>
                        <div class="nav_name">
                            实绩管理
                        </div>
                    </a>
                </li>
                <li class="nav_item" :class="route.indexOf('/display') >= 0 ?' nav_active':''">
                        <a href="#/display">
                        <div class="nav_img">
                            <img src="/static/images/i4.png" alt="" class="none">
                            <img src="/static/images/i4_active.png" alt="" class="show">
                        </div>
                        <div class="nav_name">
                            VR党建展厅
                        </div>
                    </a>
                </li>
                <li class="nav_item" :class="route.indexOf('/space') >= 0 ?' nav_active':''">
                        <a href="#/space">
                        <div class="nav_img">
                            <img src="/static/images/i5.png" alt="" class="none">
                            <img src="/static/images/i5_active.png" alt="" class="show">
                        </div>
                        <div class="nav_name">
                            创客空间
                        </div>
                    </a>
                </li>
            </ul>
        </div>
    </div>
  </template>
  
  <script>
import { watch } from 'vue'
  export default {
    name: 'commonheader',
    data () {
      return {
        route:''
      }
    },
    created(){
        console.log(this.$route)
        this.route = this.$route.path
    },
    watch:{
        $route:{
            handler(newval,oldval){
                this.route = newval.path
            },
            deep:true,
            immediate:true
        }
    }
  }
  </script>
  
  <!-- Add "scoped" attribute to limit CSS to this component only -->
  <style lang="scss" scoped>
    @import '@/assets/css/common.scss'
  </style>
  